<template>
  <div style="height: 800px">
    <el-container>
      <el-header>
        <div class="thecenterbody">
          <div><img :src="localinfo" alt="头像" /></div>
          <div>
            <h3>{{ UserDate.name }}</h3>
            <!-- <span class="spanicon"
              ><el-icon><CircleCheckFilled /></el-icon>实名认证用户</span
            > -->
            <p>{{ UserDate.address }}</p>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <h2 class="person_body_list" style="border-bottom: none">个人中心</h2>
          <el-menu
            router
            default-active="/mineself"
            active-text-color="#00c3ff"
            class="el-menu-vertical-demo"
          >
            <el-menu-item index="/mineself">
              <el-icon>
                <User />
              </el-icon>
              <span>个人信息</span>
            </el-menu-item>
            <el-menu-item index="/order">
              <el-icon>
                <setting />
              </el-icon>
              <span>预约信息</span>
            </el-menu-item>
            <el-menu-item index="/myarticle">
              <el-icon>
                <document />
              </el-icon>
              <span>论坛信息</span>
            </el-menu-item>
            <el-menu-item index="/vaccinate">
              <el-icon>
                <setting />
              </el-icon>
              <span>接种信息</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="overflow-y: hidden">
          <router-view></router-view
        ></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Personl',
  data() {
    return {
      ruleForm: {},
      localinfo:
        'https://img1.baidu.com/it/u=1056497728,1432074733&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',

      UserDate: {},
    };
  },
  methods: {
    getuserDate() {
      //获取当前用户名和头像用*分隔开
      let token = localStorage.getItem('token');
      this.$http
        .post('/inoculations/user/getTokenId', token)
        .then((res) => {
          if (res.statusCode == '200') {
            this.UserDate = res.data;
            // console.log(res.data.split("*")[0])//则取*号之前的
            // console.log("*号之后的"+res.data.split("*")[1])//则取*号之后的
            // console.log(res.data);
            //this.localName = res.data.split("*")[0];
            //this.localinfo = res.data.split("*")[1];
          }
        })
        .catch(() => {
          ElMessage.error('数据加载失败,请刷新！');
        });
    },
  },
  created() {
    this.getuserDate();
  },
};
</script>

<style scoped>
.thecenterbody {
  height: 160px;
  width: 78%;
  margin: 0 auto;
  margin-top: 100px;
  box-shadow: 7px 15px 40px #dfe3e3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 10px;
}

.thecenterbody img {
  height: 100px;
  width: 100px;
  border-radius: 10%;
  margin-left: 30px;
  margin-top: 30px;
  margin-right: 30px;
}

.thecenterbody h3 {
  font-size: 16px;
  margin-top: 30px;
}

.thecenterbody span {
  font-size: 16px;
  font-weight: 500;
  color: #87cefa;
}

/* 取消menu的右侧边框 */
.el-menu {
  border: none;
}

.spanicon .el-icon {
  font-size: 24px;
  color: #ffd700;
  margin-top: 5px;
  vertical-align: bottom;
}

.thecenterbody p {
  font-size: 14px;
  color: grey;
}

.el-aside {
  margin-left: 12%;
  margin-top: 230px;
  height: 450px;
  /* background-color: aqua; */
  box-shadow: 7px 15px 40px #c0d4d4;
  overflow-x: hidden;
  background-color: #fff;
  border-radius: 10px;
}

.person_body_list {
  width: 100%;
  height: 40px;
  margin-top: 25px;
  margin-left: 45px;
  font-size: 22px;
  font-weight: 400;
  background-image: -webkit-linear-gradient(
    left,
    rgb(42, 134, 141),
    #e9e625dc 20%,
    #3498db 40%,
    #e74c3c 60%,
    #09ff009a 80%,
    rgba(82, 196, 204, 0.281) 100%
  );
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.el-menu-item {
  margin-left: 20px;
}

.el-main {
  margin-top: 230px;
  margin-right: 12%;
  margin-left: 30px;
  height: 450px;
  /* background-color: #dfe3e3; */
  box-shadow: 7px 15px 40px #bfd4d4;
  background-color: #fff;
  border-radius: 10px;
}
</style>
